<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-10-07 18:01:35
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-05-08 11:41:22
 * @FilePath: \report-h5\src\pages\vehicleCondition\queryRecord\refreshBtn.vue
-->
<template>
    <span :class="['btn-query', refreshing ? 'active' : '']" @click="onOpenReport">
        刷新{{ refreshing ? '中' : '' }}
    </span>
</template>
<script setup lang="ts">
import QueryReportStatus from '@/utils/queryReportStatus'
import { onUnmounted } from 'vue'
import { ref } from 'vue'
//接收来自父级的参数
const props = defineProps(['data'])

//注册父级回调
const emits = defineEmits(['update'])
const refreshing = ref(false)

const queryReport = new QueryReportStatus()

const onOpenReport = () => {
    refreshing.value = !refreshing.value
    if (refreshing.value) {
        queryReport.query({
            vin: props.data.vin,
            orderNo: props.data.orderNo,
            vinParseId: props.data.vinParseId,
            reportType: Number(props.data.productType),
            isSkip: false,
            skipMode: 'push',
            loop: false,
            reportId: props.data.reportId,
            succeed: () => {
                refreshing.value = false
                emits('update', { type: 'refresh' })
            },
            failed: () => {
                refreshing.value = false
            }
        })
    } else {
        queryReport.destroy()
    }
}
onUnmounted(() => {
    console.log('onDeactivated')
    queryReport.destroy()
})
</script>
<style scoped lang="scss">
.btn-query {
    width: 6.67rem;
    height: var(--cxl-size-30);
    border-radius: var(--cxl-size-15);
    text-align: center;
    line-height: var(--cxl-size-30);
    font-size: var(--cxl-size-12);
    background-color: var(--cxl-color-primary);
    color: var(--cxl-color-white);
    box-sizing: border-box;
    transition: all 0.35s;
    &.active {
        background-color: var(--cxl-color-F59A23);
    }
}
</style>
